<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>添加新收货人</title>
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/jquery-weui.min.css" />
		<link rel="stylesheet" type="text/css" href="css/weui.min.css" />
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
				box-sizing: border-box;
			}
			
			#main {
				max-width: 640px;
				min-width: 320px;
				margin: 0px auto;
				height: 500px;
			}
			
			header {
				height: 48px;
				width: 100%;
				background-color: #e62f17;
				line-height: 48px;
				background-image: url(img/sd_nav.png);
				background-size: 320px 48px;
				background-repeat: no-repeat;
				overflow: hidden;
			}
			
			a:hover {
				text-decoration: none;
			}
			
			#newMan {
				padding: 10px;
			}
			
			.form-horizontal {
				width: 90%;
				margin: 0px auto;
			}
			
			.form-group {
				margin: 0px;
				padding: 0px;
				margin-top: 10px;
				width: 100%;
				position: relative;
			}
			
			.col-sm-11 {
				width: 100%;
				margin: 0px;
				padding: 0px;
			}
			
			.form-control {
				padding-left: 20px;
			}
			
			.form-horizontal .form-group {
				margin-left: 0px;
			}
			
			.col-sm-offset-2 {
				margin-left: 0px;
			}
			
			.ss {
				position: absolute;
				right: 10px;
				top: 8px;
				border-left: 1px solid #e2e2e2;
				height: 20px;
				line-height: 20px;
				font-size: 18px;
				padding-left: 10px;
			}
			
			#city {
				width: 100%;
				float: left;
				/*display: none;*/
			}
			
			#city li {
				width: 100%;
				height: 49px;
				line-height: 49px;
				border-bottom: 1px solid #e2e2e2;
				font-size: 12px;
				padding-left: 2.5%;
			}
			
			.first {
				color: #fff;
				background: #3c3c3c !important;
				font-size: 14px !important;
			}
			
			.dingwei {
				font-size: 18px;
			}
			
			.close1 {
				color: #e72f17;
				font-size: 30px;
				margin-right: 20px;
				float: right;
			}
		</style>
		<script src="lib/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="lib/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="lib/city-picker.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="lib/jquery-weui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="lib/swiper.jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="lib/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="lib/zepto.js" type="text/javascript" charset="utf-8"></script>
		<script src="lib/citylist.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload = function() {
					document.getElementById("inputSheng").value = "";
					document.getElementById("inputShi").value = "";
					document.getElementById("inputXian").value = "";
					document.getElementById("inputName").focus();

				}
				//1、将点击的省/市/县保存在变量中，在事件最后放到input标签中，这样可以在点击返回时，若没有选择市或者县依然有数据
				//2、设置市input的点击事件，获取输入框中的省份，便利所有省份，得到所有的市，然后设置事件
				//3、县的点击事件一样
			var shengji = "";
			var shiji = "";
			var xianji = "";

			function selectcity() {
				document.getElementById("context").style.display = "none";
				document.getElementById("sheng").style.display = "block";
				var sheng = document.getElementById("sheng");
				sheng.innerHTML = "";
				//				var shengs = citylist.citys;
				var shengfirstli = document.createElement("li");
				sheng.appendChild(shengfirstli);
				shengfirstli.className = "first";
				shengfirstli.onclick = function() {
					sheng.style.display = "none";
					document.getElementById("context").style.display = "block";
				}
				shengfirstli.innerHTML = '<i class="dingwei iconfont iconfont-dingwei"></i> 请选择省份<i class="close1 iconfont iconfont-close2"></i>';
				for(var i = 0; i < shengs.length; i++) {
					var li = document.createElement("li");
					li.innerHTML = shengs[i].p;
					sheng.appendChild(li);
					(function(shengindex) {
						li.onclick = function() {
							var shengji = shengs[shengindex].p;
							sheng.style.display = "none";
							var shi = document.getElementById("shi");
							shi.innerHTML = "";
							shi.style.display = "block";
							var shis = shengs[shengindex].c;
							var shifirstli = document.createElement("li");
							shi.appendChild(shifirstli);
							shifirstli.className = "first";
							shifirstli.onclick = function() {
								shi.style.display = "none";
								document.getElementById("context").style.display = "block";
								if(shengji) {
									document.getElementById("inputSheng").value = shengji;
								}
							}
							shifirstli.innerHTML = '<i class="dingwei iconfont iconfont-dingwei"></i> ' + shengs[shengindex].p + '<i class="close1 iconfont iconfont-close2"></i>';
							for(var j = 0; j < shis.length; j++) {
								var li = document.createElement("li");
								li.innerHTML = shis[j].n;
								shi.appendChild(li);
								(function(shiindex) {
									li.onclick = function() {
										shiji = shis[shiindex].n;
										shi.style.display = "none";
										var xian = document.getElementById("xian");
										xian.innerHTML = "";
										xian.style.display = "block";
										var xians = shis[shiindex].a;
										var xianfirstli = document.createElement("li");
										xian.appendChild(xianfirstli);
										xianfirstli.className = "first";
										xianfirstli.onclick = function() {
											xian.style.display = "none";
											document.getElementById("context").style.display = "block";
											if(shiji) {
												document.getElementById("inputShi").value = shiji;
												document.getElementById("inputSheng").value = shengji;
											}
										}
										xianfirstli.innerHTML = '<i class="dingwei iconfont iconfont-dingwei"></i> ' + shengs[shengindex].p + ' ' + shis[shiindex].n + '<i class="close1 iconfont iconfont-close2"></i>';
										for(var k = 0; k < xians.length; k++) {
											var li = document.createElement("li");
											li.innerHTML = xians[k].s;
											xian.appendChild(li);
											(function(xianindex) {
												li.onclick = function() {
													xianji = xians[xianindex].s;
													xian.style.display = "none";
													document.getElementById("context").style.display = "block";
													document.getElementById("inputSheng").value = shengs[shengindex].p;
													document.getElementById("inputShi").value = shis[shiindex].n;
													document.getElementById("inputXian").value = xians[xianindex].s;
												}
											})(k);
										}
									}
								})(j);
							}
						}
					})(i);
				}
			}
			var shengs = citylist.citys; //是个数组

			function selectShi() {
				var sheng = document.getElementById("inputSheng").value;
				var shengarr = new Array();
				for(var i = 0; i < shengs.length; i++) {
					shengarr.push(shengs[i].p);
				}
				var shengindex;
				if(sheng != "") {
					for(var i = 0; i < shengarr.length; i++) {
						if(shengarr[i] == sheng) {
							shengindex = i;
						}
					}
					document.getElementById("context").style.display = "none";
					document.getElementById("shi").style.display = "block";
					var shi = document.getElementById("shi");
					shi.innerHTML = "";
					shi.style.display = "block";
					var shis = shengs[shengindex].c;
					var shifirstli = document.createElement("li");
					shi.appendChild(shifirstli);
					shifirstli.className = "first";
					shifirstli.onclick = function() {
						shi.style.display = "none";
						document.getElementById("context").style.display = "block";
						if(sheng) {
							document.getElementById("inputSheng").value = sheng;
						}
					}
					shifirstli.innerHTML = '<i class="dingwei iconfont iconfont-dingwei"></i> ' + shengs[shengindex].p + '<i class="close1 iconfont iconfont-close2"></i>';
					for(var j = 0; j < shis.length; j++) {
						var li = document.createElement("li");
						li.innerHTML = shis[j].n;
						shi.appendChild(li);
						(function(shiindex) {
							li.onclick = function() {
								shiji = shis[shiindex].n;
								shi.style.display = "none";
								var xian = document.getElementById("xian");
								xian.innerHTML = "";
								xian.style.display = "block";
								var xians = shis[shiindex].a;
								var xianfirstli = document.createElement("li");
								xian.appendChild(xianfirstli);
								xianfirstli.className = "first";
								xianfirstli.onclick = function() {
									xian.style.display = "none";
									document.getElementById("context").style.display = "block";
									if(shiji) {
										document.getElementById("inputSheng").value = shengs[shengindex].p;
										document.getElementById("inputShi").value = shis[shiindex].n;
									}
								}
								xianfirstli.innerHTML = '<i class="dingwei iconfont iconfont-dingwei"></i> ' + shengs[shengindex].p + ' ' + shis[shiindex].n + '<i class="close1 iconfont iconfont-close2"></i>';
								for(var k = 0; k < xians.length; k++) {
									var li = document.createElement("li");
									li.innerHTML = xians[k].s;
									xian.appendChild(li);
									(function(xianindex) {
										li.onclick = function() {
											xianji = xians[xianindex].s;
											xian.style.display = "none";
											document.getElementById("context").style.display = "block";
											document.getElementById("inputSheng").value = shengs[shengindex].p;
											document.getElementById("inputShi").value = shis[shiindex].n;
											document.getElementById("inputXian").value = xians[xianindex].s;
										}
									})(k);
								}
							}
						})(j);
					}
				}
			}

			function selectXian() {
				var sheng = document.getElementById("inputSheng").value;
				var shi = document.getElementById("inputShi").value;
				if(sheng && shi) {
					document.getElementById("context").style.display = "none";
					document.getElementById("xian").style.display = "block";
				}
				var shengarr = new Array();
				for(var i = 0; i < shengs.length; i++) {
					shengarr.push(shengs[i].p);
				}
				var shiarr = shengs[shengindex].c;
				var shengindex;
				var shiindex;
				if(sheng) {
					for(var i = 0; i < shengarr.length; i++) {
						if(shengarr[i] == sheng) {
							shengindex = i;
							if(shi) {
								for(var j = 0; j < shiarr.length; j++) {
									if(shiarr[j] == shi) {
										shiindex = j;
									}
								}
							}
						}
					}
				}
				var xian = document.getElementById("xian");
				xian.innerHTML = "";
				xian.style.display = "block";
				var xians = shis[shiindex].a;
				var xianfirstli = document.createElement("li");
				xian.appendChild(xianfirstli);
				xianfirstli.className = "first";
				xianfirstli.onclick = function() {
					xian.style.display = "none";
					document.getElementById("context").style.display = "block";
					if(shi) {
						document.getElementById("inputShi").value = shi;
						document.getElementById("inputSheng").value = sheng;
					}
				}
				xianfirstli.innerHTML = '<i class="dingwei iconfont iconfont-dingwei"></i> ' + shengs[shengindex].p + ' ' + shis[shiindex].n + '<i class="close1 iconfont iconfont-close2"></i>';
				for(var k = 0; k < xians.length; k++) {
					var li = document.createElement("li");
					li.innerHTML = xians[k].s;
					xian.appendChild(li);
					(function(xianindex) {
						li.onclick = function() {
							xianji = xians[xianindex].s;
							xian.style.display = "none";
							document.getElementById("context").style.display = "block";
							document.getElementById("inputSheng").value = shengs[shengindex].p;
							document.getElementById("inputShi").value = shis[shiindex].n;
							document.getElementById("inputXian").value = xians[xianindex].s;
						}
					})(k);
				}
			}

			function checkPhone() {
				var phone = document.getElementById('inputTel').value;
				if(!(/^1[34578]\d{9}$/.test(phone))) {
					alert("手机号码有误，请重填");
					return false;
				}
			}
			var appkId = "zRQ8361wyKbHDAkKLrRIrjRI-gzGzoHsz";
			var appKey = "03B6rI1KqtyHAxKODz1cukHt";

			function save() {
				var name = document.getElementById("inputName");
				var tel = document.getElementById("inputTel");
				var sheng = document.getElementById("inputSheng");
				var shi = document.getElementById("inputShi");
				var xian = document.getElementById("inputXian");
				var xiangxi = document.getElementById("inpurAdress");
				if(!name.value) {
					name.placeholder = "请填写收货人姓名";
					name.focus();
					name.className += " borcol";
				} else if(!tel) {
					tel.placeholder = "请填写收货人手机";
					tel.focus();
					tel.className += " borcol";
				} else if(!sheng) {
					sheng.placeholder = "请选择省份";
					sheng.focus();
					sheng.className += " borcol";
				} else if(!shi) {
					shi.placeholder = "请选择城市";
					shi.focus();
					shi.className += " borcol";
				} else if(!xiangxi) {
					xiangxi.placeholder = "请填写详细地址";
					xiangxi.focus();
					xiangxi.className += " borcol";
				} else if(!checkPhone) {
					tel.focus();
					tel.className += " borcol";
				} else {
					var name = document.getElementById("inputName").value;
					var tel = document.getElementById("inputTel").value;
					var sheng = document.getElementById("inputSheng").value;
					var shi = document.getElementById("inputShi").value;
					var xian = document.getElementById("inputXian").value;
					var xiangxi = document.getElementById("inpurAdress").value;
					alert("可以保存！");
					$.ajax({
						type: "post",
						url: "https://leancloud.cn:443/1.1/classes/ADDRESS",
						//一般的请求格式
						headers: {
							"X-LC-Id": appkId,
							"X-LC-Key": appKey
						},
						data: '{"Name":"' + name + '","Tel":"' + tel + '","Province":"' + sheng + '","City":"' + shi + '","County":"' + xian + '","XiangXiDiZhi":"' + xiangxi + '"}',
						contentType: "application/json",
						success: function(data) {
							alert("保存成功！");
							console.log(data);
							location.href = "dingDanSub.html";
						}
					});
				}
			}
		</script>
	</head>

	<body>
		<div id="main">
			<div id="city">
				<ul id="sheng" class="city">

				</ul>
				<ul id="shi" class="city" style="display: none;"></ul>
				<ul id="xian" class="city" style="display: none;"></ul>
			</div>
			<div id="context">
				<header>
					<div class="top_back fl w_25 col_white f20 pl10 k_back glyphicon glyphicon-chevron-left" style="line-height: 48px;"></div>
					<div class="top_head w_50 tc fl col_white f20">新增收货人</div>
					<div class="fl w_25"></div>
				</header>
				<div id="newMan">
					<form class="form-horizontal" role="form">
						<div class="form-group">
							<div class="col-sm-11">
								<input type="email" class="form-control" id="inputName" placeholder="收货人">
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-11">
								<input type="tel" class="form-control" id="inputTel" placeholder="手机号码">
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-11">
								<input type="text" class="form-control" id="inputSheng" placeholder="请选择省份" onfocus="selectcity()">
								<i class="ss iconfont iconfont-arrow2-bottom"></i>
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-11">
								<input type="text" class="form-control" id="inputShi" placeholder="请选择城市" onfocus="selectShi()">
								<i class="ss iconfont iconfont-arrow2-bottom"></i>

							</div>
						</div>
						<div class="form-group xian">
							<div class="col-sm-11">
								<input type="text" class="form-control" id="inputXian" placeholder="请选择区/县" onfocus="selectXian()">
								<i class="ss iconfont iconfont-arrow2-bottom"></i>

							</div>
						</div>
						<div class="form-group xian">
							<div class="col-sm-11">
								<textarea name="address" id="inpurAdress" rows="3" class="radius4px form-control" data-invalid="请填写详细地址" placeholder="请填写详细地址"></textarea>
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-11">
								<div class="checkbox fr">
									<label><input type="checkbox"> 设为默认地址</label>
								</div>
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-11">
								<a href="javascript:;" class="savebtn weui_btn weui_btn_warn" onclick="save()">保存</a>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</body>

</html>